<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
    <title>历史排行</title>
    <script src="https://cdn.bootcss.com/babel-polyfill/7.4.4/polyfill.js"></script>
    <script src="${ctx}/js/jquery1.8.2.min.js"></script>
    <script src="${ctx}/js/vue.min.js"></script>
    <link rel="stylesheet" href="${ctx}/css/reset.css">
    <script src="${ctx}/js/changeSize.js"></script>
    <script src="${ctx}/layui/layui.all.js"></script>
    <link rel="stylesheet" href="${ctx}/layui/css/layui.mobile.css">
</head>
<style>
    [v-cloak] {
        display: none;
    }
    .rank_box{}

    .headline {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 1rem 0 0.4rem 0;
        background: #fff;
        z-index: 10;
    }
    .headline .title{
        position: relative;
        text-align: center;
    }
    .headline .title p {
        font-size:1rem;
        line-height: 2.2rem;
        color: #111;
    }

    .back {
        width: 1rem;
        height: 1rem;
        position: absolute;
        left: 0.6rem;
        top: 50%;
        margin-top: -0.5rem;
    }
    .detail_box {
        padding-top: 6.6rem;
        position: relative;
        z-index: 5;
    }

    .menu_box {
        overflow: hidden;
        width: 100%;
        height: 2.5rem;
    }
    .menu_list {
        display: flex;
        overflow-y: hidden;
        flex-wrap: nowrap;
        overflow-x: scroll;
        padding: 0.5rem 0.5rem 0 0.5rem;
        box-sizing: border-box;
        height: 2.8rem;
    }
    .menu_list .date_show{
        position: relative;
        display: inline-block;
        flex-shrink: 0;
        width: 6.1rem;
        height:1.6rem;
        line-height: 1.6rem;
        margin-right: 1rem;
        border: 1px solid #d4d4d4;
        border-radius: 2.4rem;
        text-align: center;
        font-size: 0.63rem;
        box-sizing: border-box;
        color: #b1b1b1;
    }
    .menu_list .choose {
        background: linear-gradient(to bottom right, #F07056, #FCC159);
        color: #fff;
    }
    .menu_list .date_show div{
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
    }

    .menu_list .date_show .day_rank {
        line-height: 1.65rem;
    }

    .rank_list {
        padding: 0.5rem 0.5rem 1.5rem 0.5rem;
        background:#F6F6F6 ;
    }

    .bg {
        background:#F6F6F6 ;
        position: fixed;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
    }

    .sort_box {
        background: #fff;
        border-radius: 0.2rem;
        padding:1.5rem 0.4rem 0.4rem 0.4rem;
        font-size: 0.78rem;
    }
    .table_header {
        display:flex;
        font-size: 0.7rem;
    }
    .table_header span{
        color: #999999;
        display: inline-block;
        text-align: center;
    }
    .percent_one{
        width: 14%!important;
    }
    .percent_three{
        width: 31%!important;
    }
    .percent_two{
        width: 24%!important;
    }
    .table_body {
        margin-top: 1.5rem;
        font-size: 0.75rem;
    }
    .table_line{
        display: flex;
        position: relative;
        padding: 0.6rem 0;
        align-items: center;
        border-bottom: 1px solid #f2f2f2;
    }
    .table_line:last-child{
        border-bottom:none;
    }
    .myself{
        padding: 0.9rem 0;
    }
    .message {
        font-size:0.5rem;
        color: orange;
        position: absolute;
        right: 0.2rem;
        bottom: 0.2rem;
    }
    .sort_index {
        color: #999;
    }
    .table_line .avatar{
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 2px;
    }
    .person_record {
        background: #FCEFD2
    }

    .table_item {
        box-sizing: border-box;
        text-align: center;
        padding: 0 0.2rem;
    }
    .normal{
        color: #333333
    }
    .reward {
        color: #F06865;
    }
    .total {
        color: #333;
        background: #FCEFD2
    }
    .earn p {
        font-size: 0.63rem;
    }
    .earn p:first-child{
        padding-bottom: 0.3rem;
    }
    .earn p:last-child{
        font-size: 0.5rem;
        margin-top: 0.2rem;
    }
    .add_more {
        border-radius: 0.6rem;
        width: 5rem;
        margin: 0.5rem auto;
        text-align: center;
        line-height: 1.2rem;
        border: 1px solid rgba(153, 153, 153, 0.5);
        color: #333;
        font-size: 0.75rem;
    }
    .no_more {
        text-align: center;
        color: #bbb;
        font-size: 0.63rem;
        line-height: 1rem;
        padding: 0.8rem 0;
    }


</style>
<body>
<div id="app">
    <div class="rank_box" v-cloak>
        <div class="headline">
            <div class="title">
                <img src="${ctx}/image/zuo_black.png" class="back" @click="comeback()"/>
                <p>历史排行</p>
            </div>
             <#-- 周、日 -->
            <div class="menu_box">
                <div class="menu_list" v-if="dateList.length!==0">
                    <div v-for="(item,index) in dateList" @click="chooseMenu(index,item.queryKey)" class="date_show" :class="{'choose':menuIndex===index}">
                        <div>
                            <#--<p v-if="types==1">第{{index+1}}周</p>-->
                            <p>{{item.show}}</p>
                        </div>
                    </div>
                </div>
                <div  class="no_more" v-else>暂无数据</div>
            </div>
        </div>
        <div class="detail_box">
            <#--列表-->
            <div class="rank_list">
                <div class="sort_box">
                    <div class="table_header">
                        <span class="percent_one">排名</span>
                        <span class="percent_three">昵称</span>
                        <span class="percent_two">排名奖励(元)</span>
                        <span class="percent_three">累计赚取(元)</span>
                    </div>
                    <div class="table_body">
                        <#-- 未上榜用户 -->
                        <#--<div class="total table_line" v-if="myInfo&&(myInfo.sort>maxData||myInfo.sort=='100+')">-->
                            <#--<div class="table_item percent_one">{{myInfo.sort}}</div>-->
                            <#--<div class="table_item percent_three">{{myInfo.name}}</div>-->
                            <#--<div class="table_item percent_two">{{myInfo.money?myInfo.money/100:'—'}}</div>-->
                            <#--<div class="table_item percent_three earn">-->
                                <#--<p>{{myInfo.score?myInfo.score/100:0}}元</p>-->
                                <#--<p class="message">{{myInfo.msg}}</p>-->
                            <#--</div>-->
                        <#--</div>-->

                        <#-- 上榜用户 -->
                        <div class="table_line" :class="{'person_record':item.status==99}" v-for="(item,index) in rankList">
                            <div class="table_item percent_one">
                                <i class="sort_index" v-if="index>2">{{index+1}}</i>
                                <div v-else>
                                    <img src="${ctx}/image/rank/first.png" v-if="index===0">
                                    <img src="${ctx}/image/rank/second.png" v-if="index===1">
                                    <img src="${ctx}/image/rank/third.png" v-if="index===2">
                                </div>
                            </div>
                            <div class="table_item percent_three">
                                <span class="normal">{{item.memberName}}</span>
                            </div>
                            <div class="table_item percent_two">
                                <div class="reward">{{item.money?item.money/100:0}}</div>
                            </div>
                            <div class="table_item percent_three earn">
                                <span class="normal">{{item.memberScore?item.memberScore/100:0}}元</span>
                                <p v-if="item.sort<maxData&&item.sort==myInfo.sort&&myInfo.score!=0" class="message">{{myInfo.msg}}</p>
                            </div>
                        </div>
                        <#--<div class="add_more" @click="addMore()" v-if="hasMore">查看更多</div>-->
                        <div class="no_more"  v-if="!hasMore">没有排名啦~</div>
                    </div>
                </div>
            </div>

        </div>
        <div class="bg"></div>
    </div>
</div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            dateList:[],
            rankList: [],
            menuIndex:0,
            startDay:'',
            endDay:'',
            score:0,
            myInfo:{},
            current:1,
            userInfo:{},
            money:'',
            maxData:0,
            hasMore:false,
            userId:'',
            items:'',
            types:0
        },
        mounted: function () {
            this.types  = '${type}';
            this.getDateList();
            window.xy_web.showAndHideRankTitleBar(false);
        },
        methods: {
            // 获取日期
            getDateList(){
                var that = this;
                var header = window.xy_web.getNetHeader();
                window.xy_web.showLoading();
                $.ajax({
                    url: '/ranking/getdate',
                    type: 'post',
                    data: {type:'${type}'==0?1:2},
                    async: false,
                    headers: JSON.parse(header),
                    // headers:{"appStore":"test","appid":"xianyu","brand":"test","imei":"863254030974322","lat":"","lng":"","macAddr":"C4:0B:CB:F2:C7:18","os":"Othernull","osv":"MI 6","sign":"7e058d5d632eaf9e75de4a687f12fdfd","time":"1565253309935","userid":"70e0e71d6045454a84927a1e11439c1a","version":"100"},
                    dataType: "json",
                    success: function (res) {
                        window.xy_web.dismissLoading();
                        // console.log('date',res.data);
                        if (res.success) {
                            that.dateList = res.data;
                            if (res.data.length!==0) {
                                that.items = res.data[0].queryKey;
                                that.getRank(1);
                            }

                        }else {
                            layer.msg(res.message);
                        }
                    },
                    error: function () {
                        window.xy_web.dismissLoading();
                    }
                });
            },

            // 获取列表信息
            getRank: function (val) {
                var that = this;
                var header = window.xy_web.getNetHeader();
                window.xy_web.showLoading();
                $.ajax({
                    url: '/ranking/history',
                    type: 'post',
                    data: {type:'${type}'==0?1:2,date:that.items},
                    async: false,
                    headers: JSON.parse(header),
                    // headers:{"appStore":"test","appid":"xianyu","brand":"test","imei":"863254030974322","lat":"","lng":"","macAddr":"C4:0B:CB:F2:C7:18","os":"Othernull","osv":"MI 6","sign":"7e058d5d632eaf9e75de4a687f12fdfd","time":"1565253309935","userid":"70e0e71d6045454a84927a1e11439c1a","version":"100"},
                    dataType: "json",
                    success: function (res) {
                        window.xy_web.dismissLoading();
                        if (res.success) {
                            if (res.data) {
                               that.rankList = res.data;
                            }
                            // console.log(res.data);
                            that.hasMore = res.data&&res.data.length!=0;
                        }else {
                            layer.msg(res.message);
                        }
                    },
                    error: function () {
                        window.xy_web.dismissLoading();
                    }
                });
            },

            addMore:function(){
                this.current =  this.current+1;
                this.getRank(this.current);
            },

            chooseMenu:function(index,item){
                this.menuIndex = index;
                this.items = item;
                this.getRank(1);
            },

            // 返回上一页
            comeback: function () {
                window.xy_web.closePage();
            },

        }
    });

</script>
